import React, { Component } from 'react'
import { Link, NavLink } from 'react-router-dom'

export default class extends Component {
    changePage(url) {
        console.log(this.props);
        this.props.history.push(url, {
            // 这里的参数不会被用户看到，但是也可以起到传参的作用
            code: 666,
            location: 'sz-ba'
        })
    }
    render() {
        return (
            <>
                <p>404。。。 您输入的地址有误！</p>
                <p>------------------------</p>
                {/* 声明式导航，通过内置组件导航 */}
                <Link to="/">返回首页</Link>
                <NavLink to="/404" activeClassName='active'>404页</NavLink>
                <NavLink to="/coma" activeClassName='active'>ComA页</NavLink>
                <NavLink to="/combig" activeClassName='active'>ComBig页</NavLink>
                <NavLink to="/arg?age=18&time=1006" activeClassName='active'>arg页</NavLink>
                <p>------------------------</p>
                {/* 编程式导航 */}
                <button onClick={() => this.changePage('/')}>返回首页</button>
                <button onClick={() => this.changePage('/404')}>404页</button>
                <button onClick={() => this.changePage('/coma')}>ComA页</button>
                <button onClick={() => this.changePage('/combig')}>ComBig页</button>
                <button onClick={() => this.changePage('/arg?age=18&time=1006')}>arg页</button>
            </>
        )
    }
}
